<template>
        <div class="swiper-container swiper-photoBanner">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="photo in photoData" :key="photo">
      <img :src="photo" alt="">
      </div>
    </div>
    </div>

</template>


<style lang="scss" scoped>
 .swiper-container{
      width: 100%;
      height: 100%;
      
    }
    .swiper-slide {
      text-align: center;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
    //   display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      p{
      width:1.7rem;
      text-align: center;
      font-size: 0.24rem;
      :nth-child(1){
          margin-top:0.2rem;
      }
      }
    }
    img{
        width:3rem;
        height:2rem;
    }


</style>


<script>
import Swiper from 'swiper'
export default {
    methods:{
        getActBanner(){
    var swiper = new Swiper('.swiper-photoBanner', {
              slidesPerView: 2.5,

      spaceBetween: 30,
                  freeMode: true

    })
        }
    },
    mounted()
    {
        this.getActBanner()
    },
    props:['photoData']
}
</script>